@extends('layouts.auth')

@section('title', '登录')

@section('auth-title', '登录')

@section('auth-content')
<form class="auth-form" id="login-form" method="POST" action="{{ route('login') }}">
    @csrf

    <div class="form-group">
        <label class="form-label" for="name">用户名</label>
        <input type="text" id="name" name="name" class="form-input" placeholder="请输入用户名" required value="{{ old('name') }}">
        <div class="error-message" id="name-error"></div>
        @error('name')
            <div class="error-message" style="display: block;">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group">
        <label class="form-label" for="password">密码</label>
        <input type="password" id="password" name="password" class="form-input" placeholder="请输入密码" required>
        <div class="error-message" id="password-error"></div>
        @error('password')
            <div class="error-message" style="display: block;">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group">
        <label class="form-check-label">
            <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
            记住我
        </label>
    </div>

    <button type="submit" class="btn btn-primary" id="login-btn">登录</button>

    @if($is_wechat)
        <div class="text-center mt-3">
            <a href="{{ route('wechat.login') }}" class="btn btn-success">
                <i class="fab fa-weixin"></i> 微信登录
            </a>
        </div>
    @endif
</form>
@endsection

@section('auth-footer')
还没有账号？<a href="{{ route('register') }}" class="auth-link">立即注册</a>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // 表单提交
    $('#login-form').submit(function(e) {
        e.preventDefault();

        // 清除之前的错误信息
        $('.error-message').hide();
        $('.form-input').removeClass('error');

        // 验证表单
        if (!validateForm()) {
            return;
        }

        const formData = $(this).serialize();
        const submitBtn = $('#login-btn');

        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: formData,
            beforeSend: function() {
                submitBtn.prop('disabled', true).text('登录中...');
            },
            success: function(response) {
                if (response.success) {
                    showSuccess('登录成功！即将跳转...');
                    setTimeout(function() {
                        window.location.href = response.redirect_to || '{{ route("home") }}';
                    }, 1000);
                } else {
                    showError(response.message || '登录失败，请重试');
                    submitBtn.prop('disabled', false).text('登录');
                }
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false).text('登录');

                if (xhr.status === 422) {
                    // 验证错误
                    const errors = xhr.responseJSON.errors;
                    for (let field in errors) {
                        $(`#${field}`).addClass('error');
                        $(`#${field}-error`).text(errors[field][0]).show();
                    }
                } else {
                    let message = '登录失败，请检查邮箱和密码';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                    showError(message);
                }
            }
        });
    });

    // 表单验证
    function validateForm() {
        let isValid = true;

        // 验证用户名
        const name = $('#name').val();
        if (!name || name.length < 2) {
            $('#name').addClass('error');
            $('#name-error').text('用户名至少2个字符').show();
            isValid = false;
        }

        // 验证密码
        const password = $('#password').val();
        if (!password) {
            $('#password').addClass('error');
            $('#password-error').text('请输入密码').show();
            isValid = false;
        }

        return isValid;
    }

    // 实时验证
    $('#name').on('blur', function() {
        const name = $(this).val();
        if (name && name.length < 2) {
            $(this).addClass('error');
            $('#name-error').text('用户名至少2个字符').show();
        } else {
            $(this).removeClass('error');
            $('#name-error').hide();
        }
    });
});
</script>
@endpush
